<template>
  <div class="cart">
    <Card v-for="item in $store.state.cart" :key="item.id" class="card">
      <cube-switch v-model="select['my' + item.id]" class="switch" ref="switch" :id="'my' + item.id">
        <img src="//gaitaobao3.alicdn.com/tfscom/i2/97045700/O1CN01jabRLR1rye42cMSdR_!!97045700.jpg">
        <div class="info">
          <h2 v-html="item.title">哈哈哈</h2>
          <div class="handle">
            <span class="price">￥{{item.price}}</span>
            <NInput class="input" :only="item.id" @change="setCount" :count="item.count"/>
            <a href="javascript:;" class="remove" @click="remove(item.id)">删除</a>
          </div>
        </div>
      </cube-switch>
    </Card>

    <!-- 总计 -->
    <Card class="all">
      <p>
        总计（不含运费）
        <br/>
        已勾选商品<span v-text="$store.getters.selectN" class="price"></span>件，总价<span class="price">￥{{$store.getters.allPrice}}</span>
      </p>
      <cube-button :inline="true">去结算</cube-button>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/card.vue'
import NInput from '@/components/ninput.vue'

export default {
  data () {
    return {
      select: {}
    }
  },
  components: {
    Card,
    NInput
  },
  watch: {
    select (newV, v) {
      console.log(1)
    }
  },
  methods: {
    // 删除
    remove (id) {
      this.$store.commit('cartRemove', id)
    },
    // 数量监听设置
    setCount (count, id) {
      this.$store.commit('cartUpdate', { id, count })
    },
    // 开关滑块数据
    getSelect () {
      this.$store.state.cart.forEach(item => { this.select['my' + item.id] = item.select })
    },
    // 开关监听更新
    onSelect () {
      if (!this.$refs.switch) return
      let arr = []
      // 找到所有的滑块组件下的 input 对象并赋给指定数组
      this.$refs.switch.forEach(item => arr.push({ dom: item.$el.getElementsByTagName('input')[0], id: item.$el.id }))
      // 循环所有 dom 对象，添加监听内容变化事件
      arr.forEach(item => {
        item.dom.addEventListener('change', (e) => {
          // 删除自定义 id 前缀
          let id = item.id.replace('my', '')
          // 通过特有的属性访问到是否被选中 true/false
          // 更新开关选择
          this.$store.commit('setSelect', { id, select: e.target.checked })
        })
      })
    }
  },
  created () {
    this.getSelect()
  },
  mounted () {
    this.onSelect()
  }
}
</script>

<style lang="stylus" scoped>
$red = #e10800
$redLight = #dd524d
$bgc = #ccc

.cart
  background-color $bgc
  margin-top -10px
  padding 10px 0
  // 滑块
  .switch
    position relative
    // 缩略图
    img
      width 60px
      height 60px
      float left
      vertical-align middle
    // 商品信息
    .info
      position absolute
      left 110px
      padding-left 10px
      // 标题
      h2
        font-size 13px
        font-weight 900
        height 25.5px
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      // 操作
      .handle
        margin-top 10px
        .price
          color $red
          font-weight 700
          font-size 16px
        .input
          height 25px
          margin 0 2px
        .remove
          color blue
  // 总计
  .all
    position relative
    // 数字
    .price
      color $red
      font-weight 900
      margin 5px
      font-size 16px
    // 按钮
    button
      width 90px
      height 40px
      font-size 18px
      position absolute
      right 10px
      top 50%
      margin-top -20px
      background-color $redLight
</style>
